<template>
	<div class="wrap-header">
		<div class="wrap-header_inner">
			<div class="wrap-left">
				<span class="wrap-button" v-if="$slots.left || showReturn">
					<span v-if="showReturn" 
								 @click="handleReturnBtn">
						<o-icon name="arrow-left-c"></o-icon>
					</span>
					<slot name="left"></slot>
				</span>
				<span class="wrap-title" 
					v-if=" $slots.default || title ">
					<slot v-if="!title"></slot>
					{{title}}
				</span>
			</div>
			<div class="wrap-middle"
				 v-if=" $slots.middle ">
				<span class="wrap-title">
					<slot v-if="!title" name="middle"></slot>
				</span>
			</div>
			<div class="wrap-right">
				<span class="wrap-button" v-if="$slots.right">
					<slot name="right"></slot>
				</span>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
export default {
	props: {
		title: String,
		showReturn: {
			type: Boolean,
			default: false
		}
	},

    methods: {
		handleReturnBtn() {
			this.$router.go(-1);
		}
	}
}
</script>

<style lang='less' scoped>
	.wrap-header{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		box-shadow: @shadow;
		background: #fff;
	}
	.wrap-header_inner{
		width: 100%;
		padding: 12px 12px;
		display: flex;
		justify-content: space-between;
		align-self: flex-start;
		font-weight: 200;
		& .wrap-left, & .wrap-right{
			display: inline-flex;
		}
	    .wrap-button{
			padding: 0 4px;
			width: 45px;
			cursor: pointer;
			.o-icon{
				font-size: 20px;
			}
			a{
				color: @primaryTextColor;
				font-size: 18px;
				
				text-decoration: none;
				line-height: 1.4em;
				&:visited{
					color: @primaryTextColor;
					
				}
			}
		}

		.wrap-title{
			font-size: 18px;
			padding: 0 6px;
			display: -webkit-box;    
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;
			line-height: 1.4em;
		}
	}
	
</style>
